<template>
    <view class="my-order bg-active-color">
        <!-- <Lines/> -->
        <view class="order-header">
            <view
                class="header-item"
                :class="tabIndex==index? 'active':''"
                v-for="(item,index) in tabList"
                :key="index"
                @tap="changeTab(index)"
            >
                {{item.name}}
            </view>
        </view>
        
        <block
            v-for="(tabItem,tabI) in tabList"
            :key="tabI"
        >
            <view v-show="tabI===tabIndex" >
                <view v-if="tabItem.list.length>0" class="order-main" :style="'height:'+clentHeight+'px;'">
                    <!-- 订单号及其状态 -->
                    <view class="order-goods" v-for="(k,i) in tabItem.list" :key="i">
                        <view class="order-message">
							<view class="goods-no f-active-color">
								单号：{{k.orderNo}}
							</view>
							<view class="goods-status f-active-color">
								{{k.status}}
							</view>
						</view>
                        <view class="goods-item" v-for="(item,index) in k.goods_item">
                             <!-- 商品图片及描述区域 -->
                             <view class="d-flex j-center a-center">
                             	<image :src="item.goodsHeader" mode=""></image>
                             	<view class="desc">
                             		<view class="goods-title">
                             			<text>{{ item.painterName }}: {{ item.goodsName }}</text>
                             		</view>
                             		<view class="goods-price">
                             			<text>￥{{ item.goodsAmount }}</text>
                             			<input class="numberInput" type="number" v-model="item.goodsNum">
                             			<text>{{ item.goodsUnit }}</text>
                             		</view>
                             	</view>
                             </view>
                           
                        </view>
						
						<!-- 总价 -->
						<!-- <Lines></Lines> -->
						<view class="total-price">
						    订单金额: <text class="f-active-color">￥{{k.totalPrice}} </text> (包含运费￥{{k.postage}})
						</view>
						
						<!-- 支付 -->
						<view class="payment">
						    <view class="payment-text f-active-color">
						        {{k.active}}
						    </view>
						</view>
                    </view>
                    
                    <view class="bottom_foot"></view>
                </view>
            
                <!-- 无订单数据页面布局 -->
                <view v-else class="no-order" :style="'height:'+clentHeight+'px;'">
                    <view class="no-order-text">
                        您还没有相关订单
                    </view>
                    <view class="no-order-home" @click="clickMain()">
                        去首页逛逛
                    </view>
                </view>
            </view>
        </block>
		
		<commonUserTabBar :currentTab="currentTab"></commonUserTabBar>
    </view>
</template>

<script>
import global from '@/global.js'

    export default {
        data() {
            return {
				//当前选项
				currentTab:'/pages/orderList/myOrder',
                // 内容块的高度
                clentHeight:0,
                tabIndex:0,
                tabList:[]
            };
        },
        components:{
            //Lines,
            //OrderList
        },
        methods:{
            // 顶部切换
            changeTab(index){
                this.tabIndex = index;
            },
            // 获取可视区域高度【兼容】
            getClientHeight(){
                const res = uni.getSystemInfoSync();
                console.log(res.platform,res.statusBarHeight);
                const system = res.platform;
                if ( system === 'iso') {
                    return 44 + res.statusBarHeight;
                }else if( system === 'android' ){
                    return 48 + res.statusBarHeight;
                } else{
                    return 0;
                }
            },
			//查询购物车
			listOrder() {
				var token = uni.getStorageSync("token")
				console.log("caches get  token value :  ", token)
			    uni.request({
			      url: global.baseUrl + 'api/order/list', // 接口地址
			      method:'get',
			      dataType: "json",
			      header: {
			      	'X-Token': token
			      },
				  success: (res) => {
						if(res.data.code==0){
							console.log("request data :  ", res)
							this.tabList= res.data.data
				
						}else{
							console.log("request add cart result error: " ,res.data.code)
						} 
			      },
			      fail: (error) => {
			        console.log(error)
			      }
			    })
			},
			clickMain(){
				uni.reLaunch({url: '/pages/index/index'});
			}
        },
        onReady() { // 初步渲染完后执行
            uni.getSystemInfo({
                success: (res) => {
                    // 可视区域高度 减去头部高度
                    this.clentHeight = res.windowHeight - uni.upx2px(80) - this.getClientHeight();
                }
            })
        },
		onLoad() {
			this.listOrder();
		}
    }
</script>

<style lang="scss">
.order-header{
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2rpx solid #f7f7f7;
}
.header-item{
    text-align: center;
    flex: 1;
    line-height: 120rpx;
}
.active{
    border-bottom: 5rpx solid #49bdfb;
}

.order-message{
	width: 100%;
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	background-color: #f8f8f8;
	align-items: center;
	 
	.goods-no{
        margin-left: 20rpx;
	}
	
	.goods-status{
        margin-right: 20rpx;
	}
}

.j-center{
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	
	.a-center{
		margin-top: 20rpx;
	}
 
	.goods-title {
		line-height: 60rpx;
		font-size: 30rpx;
	}
 
	.goods-kind {
		line-height: 60rpx;
	}
 
	.goods-price {
		line-height: 60rpx;
		color: orange;
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
		margin-right: 30rpx;
	}
	
	.numberInput{
		flex: 1;
		text-align: right;
		margin-top: 10rpx;
		margin-right: 20rpx;
	}
	
	image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 15rpx;
		border: 0px solid rgb(239, 239, 239);
		padding-left: 20rpx;
	}

.goods-item{
	background-color: #FFFAFA;
}

.goods-content{
    padding: 10rpx 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.goods-text{
    width: 360rpx;
    padding: 0 10rpx;
    font-size: 26rpx;
}
.goods-img{
    width: 160rpx;
    height: 160rpx;
}
.goods-size{
    font-size: 24rpx;
}
.total-price{
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
    padding: 20rpx;
}
.payment{
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
    padding: 20rpx;
}
.payment-text{
    border: 2rpx solid #49bdfb;
    line-height: 40rpx;
    padding: 6rpx 40rpx;
    border-radius: 30rpx;
}

.no-order{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.no-order-home{
    padding: 6rpx 60rpx;
    border: 2rpx solid #49bdfb;
    color: #49bdfb;
    border-radius: 40rpx;
}
.no-order-text{
    padding:  50rpx;
}

.bottom_foot{
	height: 120rpx;
	margin-top: 120rpx;
}
</style>

